<template>
    <view class="content">
        <u-form labelWidth="120px" labelPosition="left" :model="userInfo" :rules="rules" ref="editForm">
            <u-form-item label="昵称" prop="nickname" borderBottom="true" ref="item1">
                <u-input v-model="userInfo.nickname" border="none" placeholder="请输入昵称" ></u-input>
            </u-form-item>
            <u-form-item label="头像" prop="avatar" borderBottom="true" ref="item2">
                  <u-upload :fileList="userInfo.avatar" :previewFullImage="true" multiple @afterRead="afterRead"
                    @delete="deletePic" :maxCount="1"></u-upload>
            </u-form-item>
        </u-form>
        <u-button type="primary" text="确认修改" @click="toEdit"></u-button>
        <u-toast ref="toastRef"></u-toast>
    </view>
</template>

<script setup lang="ts">
import CONTENT from '@/utils/constants'
import { editUserInfo , getUserDiyInfo} from '@/api/mine/mine'
import { reactive, ref } from 'vue'
import ENV from '@/utils/env'
import type { userDiyInfo } from '@/model/api/user'
import { onShow } from "@dcloudio/uni-app";

const editForm: any = ref(null)
const toastRef: any = ref(null)

const userInfo:userDiyInfo = reactive({
    nickname: '',
    avatar: []
})



const rules = reactive({
    nickname: [{
        type: 'string',
        required: true,
        pattern: CONTENT.PATTERN.NICK_NAME,
        message: '昵称不符合规范',
        trigger: ['blur', 'change']
    }],
    avatar: [{
        type: 'array',
        required: true,
        message: '请上传头像照片',
        trigger: ['blur', 'change']
    }]
})

const afterRead = (event: any) => {
    let ext = (event.file[0].name.substring(event.file[0].name.lastIndexOf(".") + 1)).toLowerCase()
    let imgExt = ['png','jpg','jpeg']
    if(imgExt.indexOf(ext) == -1){
        toastRef.value.show({
            type: 'warning',
            message: "暂不支持此图片格式",
            duration: 3000,
            position: 'top',

        })
        return
    }
    if (event.file[0].size > 1024 * 1024 * 4) {
        toastRef.value.show({
            type: 'warning',
            message: "图片大小不可超过4MB",
            duration: 3000,
            position: 'top',

        })
        return
    }
    uni.uploadFile({
        url: ENV.baseUrl + '/uploadFile/avatar', //文件服务器地址
        filePath: event.file[0].thumb,  //文件路径
        name: 'image',
        header: {
            "authorization": 'Bearer ' + uni.getStorageSync('user_token'),
        },
        success: (res) => {
            userInfo.avatar = [{
                url:ENV.serverUrl + res.data,
                avatarUrl:res.data
            }]

        },
        fail: (err) => {
            toastRef.value.show({
                type: 'warning',
                message: err.errMsg || '上传失败',
                duration: 3000,
                position: 'top',
            })
        }
    });
}

const deletePic = (event: any) => {
    userInfo.avatar.splice(event.index, 1)
}

const toEdit = () => {
    editForm.value.validate().then(() => {
        editUserInfo({nickname:userInfo.nickname , avatar:userInfo.avatar[0].avatarUrl}).then((res: any) => {
            if(res.code == 200){
                toastRef.value.show({
                    type: 'success',
                    message: "更新成功",
                    duration: 3000,
                    complete: function () {
                        uni.redirectTo({
                            url: '/pages/setting/index'
                        });
                    }
                })
            }
        })
    })
}

onShow(()=>{
    getUserDiyInfo().then((res:any)=>{
        if(res.data.avatar){
            userInfo.avatar = [
            {
                url:ENV.serverUrl + res.data.avatar,
                avatarUrl:res.data.avatar
            }
        ]
        }
        userInfo.nickname = res.data.nickname
    })
})

</script>

<style lang="scss" scoped>
.content {
    border-top: 2rpx solid #E4E4E4;
    padding: 0 20rpx;
}
</style>